<template>
  <div class="delivery-stats">
    <div class="page-header">
      <h2>配送统计分析</h2>
      <p>外卖骑手专用：分析商铺出餐速度和小区配送难度</p>
    </div>

    <!-- 快速统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon fast">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ fastShopsCount }}</div>
              <div class="stat-label">快速出餐商铺</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon slow">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ slowShopsCount }}</div>
              <div class="stat-label">慢速出餐商铺</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon easy">
              <el-icon><Location /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ easyAreasCount }}</div>
              <div class="stat-label">好找小区</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon hard">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ hardAreasCount }}</div>
              <div class="stat-label">难找小区</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 商铺出餐速度排行 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>商铺出餐速度排行</span>
              <el-radio-group v-model="shopSortType" size="small" @change="loadShopRanking">
                <el-radio-button label="fast">最快</el-radio-button>
                <el-radio-button label="slow">最慢</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="ranking-list">
            <div 
              v-for="(shop, index) in shopRanking" 
              :key="shop.id"
              class="ranking-item"
              :class="{ 'top-three': index < 3 }"
            >
              <div class="rank-number">{{ index + 1 }}</div>
              <div class="shop-info">
                <div class="shop-name">{{ shop.name }}</div>
                <div class="shop-detail">
                  {{ getCategoryLabel(shop.category) }} · {{ shop.address }}
                </div>
              </div>
              <div class="shop-time">
                <span :class="getTimeClass(shop.preparationTime)">
                  {{ shop.preparationTime }}分钟
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 小区配送难度排行 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>小区配送难度排行</span>
              <el-radio-group v-model="areaSortType" size="small" @change="loadAreaRanking">
                <el-radio-button label="easy">最容易</el-radio-button>
                <el-radio-button label="hard">最困难</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="ranking-list">
            <div 
              v-for="(area, index) in areaRanking" 
              :key="area.id"
              class="ranking-item"
              :class="{ 'top-three': index < 3 }"
            >
              <div class="rank-number">{{ index + 1 }}</div>
              <div class="area-info">
                <div class="area-name">{{ area.name }}</div>
                <div class="area-detail">
                  {{ area.district }} · 平均配送{{ area.avgDeliveryTime }}分钟
                </div>
              </div>
              <div class="area-difficulty">
                <el-rate
                  :model-value="area.difficulty"
                  disabled
                  size="small"
                />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 配送数据分析图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>配送时间分析</span>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                @change="loadDeliveryChart"
              />
            </div>
          </template>
          <v-chart 
            class="chart-large" 
            :option="deliveryChartOption" 
            :loading="chartLoading"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 配送记录表格 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>配送记录</span>
          <el-button type="primary" size="small" @click="showAddRecordDialog">
            <el-icon><Plus /></el-icon>
            添加记录
          </el-button>
        </div>
      </template>
      
      <el-table :data="deliveryRecords" v-loading="tableLoading">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="shopName" label="商铺" width="200" />
        <el-table-column prop="area" label="配送区域" width="150" />
        <el-table-column prop="preparationTime" label="出餐时间" width="100">
          <template #default="{ row }">
            <span :class="getTimeClass(row.preparationTime)">
              {{ row.preparationTime }}分钟
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryTime" label="配送时间" width="100">
          <template #default="{ row }">{{ row.deliveryTime }}分钟</template>
        </el-table-column>
        <el-table-column prop="totalTime" label="总时长" width="100">
          <template #default="{ row }">{{ row.totalTime }}分钟</template>
        </el-table-column>
        <el-table-column prop="difficulty" label="配送难度" width="120">
          <template #default="{ row }">
            <el-rate :model-value="row.difficulty" disabled size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="notes" label="备注" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button type="danger" size="small" @click="deleteRecord(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加配送记录对话框 -->
    <el-dialog
      v-model="recordDialogVisible"
      title="添加配送记录"
      width="500px"
      @close="resetRecordForm"
    >
      <el-form
        ref="recordFormRef"
        :model="recordForm"
        :rules="recordFormRules"
        label-width="100px"
      >
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="recordForm.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="商铺" prop="shopName">
          <el-input v-model="recordForm.shopName" placeholder="请输入商铺名称" />
        </el-form-item>
        <el-form-item label="配送区域" prop="area">
          <el-input v-model="recordForm.area" placeholder="请输入配送区域" />
        </el-form-item>
        <el-form-item label="出餐时间" prop="preparationTime">
          <el-input-number
            v-model="recordForm.preparationTime"
            :min="1"
            :max="120"
            placeholder="分钟"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="配送时间" prop="deliveryTime">
          <el-input-number
            v-model="recordForm.deliveryTime"
            :min="1"
            :max="120"
            placeholder="分钟"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="配送难度" prop="difficulty">
          <el-rate
            v-model="recordForm.difficulty"
            show-text
            :texts="['很容易', '容易', '一般', '困难', '很困难']"
          />
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input
            v-model="recordForm.notes"
            type="textarea"
            :rows="3"
            placeholder="记录特殊情况、路况、天气等"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="recordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddRecord">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Timer, Clock, Location, Warning, Plus } from '@element-plus/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  getDeliveryRecordsApi,
  createDeliveryRecordApi,
  deleteDeliveryRecordApi,
  getDeliveryStatsApi,
  getAreaRankingApi
} from '@/common/apis/delivery'
import { getShopRankingApi } from '@/common/apis/shops'
import type { DeliveryRecordItem, CreateDeliveryRecordRequestData } from '@/common/apis/delivery/type'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

defineOptions({
  name: 'DeliveryStats'
})

// 响应式数据
const chartLoading = ref(false)
const tableLoading = ref(false)
const recordDialogVisible = ref(false)

// 统计数据
const fastShopsCount = ref(12)
const slowShopsCount = ref(8)
const easyAreasCount = ref(15)
const hardAreasCount = ref(6)

// 排行榜类型
const shopSortType = ref('fast')
const areaSortType = ref('easy')

// 日期范围
const dateRange = ref([])

// 排行榜数据
const shopRanking = ref([])
const areaRanking = ref([])

// 配送记录
const deliveryRecords = ref([])

// 配送记录表单
const recordForm = reactive({
  date: new Date(),
  shopName: '',
  area: '',
  preparationTime: 20,
  deliveryTime: 15,
  difficulty: 3,
  notes: ''
})

// 表单验证规则
const recordFormRules = {
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  shopName: [{ required: true, message: '请输入商铺名称', trigger: 'blur' }],
  area: [{ required: true, message: '请输入配送区域', trigger: 'blur' }],
  preparationTime: [{ required: true, message: '请输入出餐时间', trigger: 'blur' }],
  deliveryTime: [{ required: true, message: '请输入配送时间', trigger: 'blur' }]
}

// 图表配置
const deliveryChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['出餐时间', '配送时间', '总时长']
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    name: '时间(分钟)'
  },
  series: [
    {
      name: '出餐时间',
      type: 'line',
      data: [],
      smooth: true
    },
    {
      name: '配送时间',
      type: 'line',
      data: [],
      smooth: true
    },
    {
      name: '总时长',
      type: 'bar',
      data: []
    }
  ]
})

// 模拟数据
const mockShops = [
  { id: '1', name: '肯德基(建国门店)', category: 'fastfood', address: '建国门外大街1号', preparationTime: 8 },
  { id: '2', name: '麦当劳(朝阳店)', category: 'fastfood', address: '朝阳路88号', preparationTime: 10 },
  { id: '3', name: '老王家麻辣烫', category: 'chinese', address: '建国路88号', preparationTime: 15 },
  { id: '4', name: '张记兰州拉面', category: 'chinese', address: '中关村大街15号', preparationTime: 35 },
  { id: '5', name: '川味小厨', category: 'chinese', address: '三里屯路20号', preparationTime: 28 }
]

const mockAreas = [
  { id: '1', name: '建国门小区', district: '朝阳区', difficulty: 2, avgDeliveryTime: 12 },
  { id: '2', name: '三里屯SOHO', district: '朝阳区', difficulty: 1, avgDeliveryTime: 8 },
  { id: '3', name: '中关村小区', district: '海淀区', difficulty: 4, avgDeliveryTime: 25 },
  { id: '4', name: '望京花园', district: '朝阳区', difficulty: 3, avgDeliveryTime: 18 },
  { id: '5', name: '老旧小区A', district: '东城区', difficulty: 5, avgDeliveryTime: 30 }
]

// 移除或注释掉mock数据
// const mockRecords = [
//   {
//     id: '1',
//     date: '2024-01-15',
//     shopName: '肯德基(建国门店)',
//     area: '建国门小区',
//     preparationTime: 8,
//     deliveryTime: 12,
//     totalTime: 20,
//     difficulty: 2,
//     notes: '正常配送'
//   },
//   {
//     id: '2',
//     date: '2024-01-15',
//     shopName: '张记兰州拉面',
//     area: '中关村小区',
//     preparationTime: 35,
//     deliveryTime: 25,
//     totalTime: 60,
//     difficulty: 4,
//     notes: '出餐慢，小区难找'
//   }
// ]

// 获取类型标签文本
const getCategoryLabel = (category: string) => {
  const labels = {
    chinese: '中餐',
    western: '西餐',
    fastfood: '快餐',
    drinks: '饮品',
    dessert: '甜品'
  }
  return labels[category] || category
}

// 获取时间样式类
const getTimeClass = (time: number) => {
  if (time <= 15) return 'time-fast'
  if (time <= 30) return 'time-normal'
  return 'time-slow'
}

// 加载商铺排行
const loadShopRanking = async () => {
  try {
    console.log('=== 开始加载商铺排行 ===')
    console.log('排序类型:', shopSortType.value)
    
    const response = await getShopRankingApi(shopSortType.value, 10)
    
    console.log('API响应完整数据:', response)
    console.log('API响应数据部分:', response.data)
    console.log('数据类型:', typeof response.data)
    console.log('是否为数组:', Array.isArray(response.data))
    console.log('数据长度:', response.data?.length)
    
    if (response.data && Array.isArray(response.data)) {
      console.log('商铺详细信息:')
      response.data.forEach((shop, index) => {
        console.log(`商铺${index + 1}:`, {
          id: shop.id,
          name: shop.name,
          preparationTime: shop.preparationTime,
          address: shop.address
        })
      })
    }
    
    // 强制使用数组形式，确保响应式更新
    const shopData = response.data || response || []
    shopRanking.value = [...shopData]
    
    console.log('设置后的shopRanking:', shopRanking.value)
    console.log('shopRanking长度:', shopRanking.value.length)
    console.log('=== 商铺排行加载完成 ===')
    
  } catch (error: any) {
    console.warn('商铺排行API调用失败，使用示例数据:', error)
    
    // 根据排序类型过滤mock数据
    const sortedMockShops = [...mockShops].sort((a, b) => {
      if (shopSortType.value === 'fast') {
        return a.preparationTime - b.preparationTime // 升序，快的在前
      } else {
        return b.preparationTime - a.preparationTime // 降序，慢的在前
      }
    })
    
    shopRanking.value = sortedMockShops.slice(0, 10)
    console.log('使用Mock数据，shopRanking:', shopRanking.value)
  }
}

// 加载区域排行
const loadAreaRanking = async () => {
  try {
    const response = await getAreaRankingApi(areaSortType.value, 10)
    areaRanking.value = response.data || response || []
  } catch (error: any) {
    console.warn('区域排行API未实现，使用示例数据:', error)
    // 不显示错误提示，直接使用mock数据
    // ElMessage.error(error.message || '加载区域排行失败')
    
    // 根据排序类型过滤mock数据
    const sortedMockAreas = [...mockAreas].sort((a, b) => {
      if (areaSortType.value === 'easy') {
        return a.difficulty - b.difficulty // 升序，容易的在前
      } else {
        return b.difficulty - a.difficulty // 降序，困难的在前
      }
    })
    
    areaRanking.value = sortedMockAreas.slice(0, 10)
  }
}

// 加载配送图表
const loadDeliveryChart = async () => {
  try {
    chartLoading.value = true
    
    const response = await getDeliveryStatsApi({ days: 7 })
    const chartData = response.data
    
    deliveryChartOption.value.xAxis.data = chartData.map(item => item.date)
    deliveryChartOption.value.series[0].data = chartData.map(item => item.avgPreparationTime)
    deliveryChartOption.value.series[1].data = chartData.map(item => item.avgDeliveryTime)
    deliveryChartOption.value.series[2].data = chartData.map(item => item.avgTotalTime)
    
    chartLoading.value = false
  } catch (error: any) {
    console.warn('配送图表API未实现，使用示例数据:', error)
    // 不显示错误提示，使用默认图表数据
    // ElMessage.error(error.message || '加载配送图表失败')
    
    // 使用mock图表数据
    const mockChartData = [
      { date: '01-10', avgPreparationTime: 15, avgDeliveryTime: 20, avgTotalTime: 35 },
      { date: '01-11', avgPreparationTime: 18, avgDeliveryTime: 22, avgTotalTime: 40 },
      { date: '01-12', avgPreparationTime: 12, avgDeliveryTime: 18, avgTotalTime: 30 },
      { date: '01-13', avgPreparationTime: 20, avgDeliveryTime: 25, avgTotalTime: 45 },
      { date: '01-14', avgPreparationTime: 16, avgDeliveryTime: 19, avgTotalTime: 35 },
      { date: '01-15', avgPreparationTime: 14, avgDeliveryTime: 21, avgTotalTime: 35 },
      { date: '01-16', avgPreparationTime: 17, avgDeliveryTime: 23, avgTotalTime: 40 }
    ]
    
    deliveryChartOption.value.xAxis.data = mockChartData.map(item => item.date)
    deliveryChartOption.value.series[0].data = mockChartData.map(item => item.avgPreparationTime)
    deliveryChartOption.value.series[1].data = mockChartData.map(item => item.avgDeliveryTime)
    deliveryChartOption.value.series[2].data = mockChartData.map(item => item.avgTotalTime)
    
    chartLoading.value = false
  }
}

// 加载配送记录
// 加载配送记录
const loadDeliveryRecords = async () => {
  try {
    try {
      tableLoading.value = true
      console.log('=== 开始加载配送记录 ===')
      
      const response = await getDeliveryRecordsApi({ 
        page: 1, 
        pageSize: 50 
      })
      
      console.log('配送记录API响应:', response)
      console.log('配送记录数据:', response)
      console.log('数据类型:', typeof response)
      console.log('是否为数组:', Array.isArray(response))
      
      if (response) {
        // 处理不同的响应数据结构
        if (response.list && Array.isArray(response.list)) {
          deliveryRecords.value = response.list
          console.log('从response.list获取配送记录:', deliveryRecords.value.length, '条')
        } else if (Array.isArray(response)) {
          deliveryRecords.value = response
          console.log('从response数组获取配送记录:', deliveryRecords.value.length, '条')
        } else {
          deliveryRecords.value = []
          console.log('API返回的数据格式不正确，response:', response)
        }
      } else {
        deliveryRecords.value = []
        console.log('API返回空数据')
      }
      
      tableLoading.value = false
      console.log('最终配送记录数据:', deliveryRecords.value)
      console.log('=== 配送记录加载完成 ===')
      
    } catch (error: any) {
      tableLoading.value = false
      console.error('配送记录API调用失败:', error)
      console.error('错误详情:', error.response || error.message)
      
      ElMessage.error(error.message || '加载配送记录失败，请检查后端服务')
      
      // 不使用mock数据，显示空列表
      deliveryRecords.value = []
    }
  } catch (error: any) {
    console.warn('配送记录API未实现，使用示例数据:', error)
    // 不显示错误提示，使用mock数据
    // ElMessage.error(error.message || '加载配送记录失败')
    
    // 使用mock配送记录数据
    deliveryRecords.value = mockRecords
  }
}

// 显示添加记录对话框
const showAddRecordDialog = () => {
  recordDialogVisible.value = true
}

// 重置记录表单
const resetRecordForm = () => {
  recordForm.date = new Date()
  recordForm.shopName = ''
  recordForm.area = ''
  recordForm.preparationTime = 20
  recordForm.deliveryTime = 15
  recordForm.difficulty = 3
  recordForm.notes = ''
}

// 处理添加记录
const handleAddRecord = async () => {
  try {
    const formData = {
      date: recordForm.date,
      shopName: recordForm.shopName,
      area: recordForm.area,
      preparationTime: recordForm.preparationTime,
      deliveryTime: recordForm.deliveryTime,
      difficulty: recordForm.difficulty,
      notes: recordForm.notes
    }
    
    await createDeliveryRecordApi(formData)
    ElMessage.success('添加记录成功')
    recordDialogVisible.value = false
    resetRecordForm()
    loadDeliveryRecords()
  } catch (error: any) {
    console.warn('添加记录API未实现，模拟添加成功:', error)
    
    // 模拟添加到本地记录
    const newRecord = {
      id: Date.now().toString(),
      date: recordForm.date.toISOString().split('T')[0],
      shopName: recordForm.shopName,
      area: recordForm.area,
      preparationTime: recordForm.preparationTime,
      deliveryTime: recordForm.deliveryTime,
      totalTime: recordForm.preparationTime + recordForm.deliveryTime,
      difficulty: recordForm.difficulty,
      notes: recordForm.notes
    }
    
    deliveryRecords.value.unshift(newRecord)
    ElMessage.success('添加记录成功')
    recordDialogVisible.value = false
    resetRecordForm()
  }
}

// 删除记录
const deleteRecord = async (record: any) => {
  try {
    await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    console.log('=== 开始删除配送记录 ===')
    console.log('删除记录ID:', record.id)
    
    await deleteDeliveryRecordApi(record.id)
    console.log('删除记录API调用成功')
    
    ElMessage.success('删除成功')
    
    // 重新加载配送记录列表
    await loadDeliveryRecords()
    console.log('=== 配送记录删除完成 ===')
    
  } catch (error: any) {
    if (error === 'cancel') {
      return
    }
    
    console.error('删除配送记录失败:', error)
    console.error('错误详情:', error.response || error.message)
    ElMessage.error(error.message || '删除配送记录失败，请检查后端服务')
  }
}

onMounted(() => {
  loadShopRanking()
  loadAreaRanking()
  loadDeliveryChart()
  loadDeliveryRecords()
})
</script>

<style scoped>
.delivery-stats {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: var(--el-text-color-primary);
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.stat-icon.fast {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
}

.stat-icon.slow {
  background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
}

.stat-icon.easy {
  background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
}

.stat-icon.hard {
  background: linear-gradient(135deg, #E6A23C 0%, #EEBE77 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking-list {
  max-height: 400px;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item.top-three .rank-number {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: white;
}

.rank-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--el-color-info-light-7);
  color: var(--el-color-info);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 12px;
}

.shop-info,
.area-info {
  flex: 1;
  margin-right: 12px;
}

.shop-name,
.area-name {
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.shop-detail,
.area-detail {
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.shop-time {
  font-weight: 600;
}

.time-fast {
  color: #67C23A;
}

.time-normal {
  color: #E6A23C;
}

.time-slow {
  color: #F56C6C;
}

.chart-large {
  height: 400px;
  width: 100%;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>